/*
*作者---杨彬
*
*/
<template>
    <div>
      <div class="product-select-warp">
        <div class="all-select-item" v-for="(citem,cindex) in thisGetData">
          <div class="content-detail-warp">
            <div class="content-detail">
                    <section class="check-img com-div-middle-ab"><input
                      type="checkbox" v-model="checkedID" :value="cindex"
                      name="thisItem" class="item-checkbox"><img
                      src="../../assets/productCar/car/notCheck.png"
                     class="not-checked"><img src="../../assets/productCar/car/checked.png"
                      class="is-checked"></section>
            <img class="product-img" :src="citem.img" @click="goProducDetailFn(citem)">
            <div class="item-money-warp"><span
              v-text="sData.productCarSData.moneySymbol" class="money-symbol"></span><span
              class="item-money" v-text="citem.price.toFixed(2)"></span></div>
              <img class="item-delete" src="../../assets/productCar/car/delete.png" @click="deleteCar(citem,citem.id)">
              <section class="product-content" @click="goProducDetailFn(citem)">
                <p class="en-name" v-text="citem.englishName"></p>
                <p class="cn-name" v-text="citem.name"></p>
                <p class="expain-type"><span class="type"
                 v-text="sData.productCarSData.size" v-if="citem.sizeName=='寸'"></span><span class="type"
                 v-text="sData.productCarSData.weight" v-if="citem.sizeName=='g'"></span><span
                  class="size" v-text="citem.specificationValue+citem.sizeName"></span></p>
                <p class="cn-toolPrice" v-if='citem.toolPrice'>额外餐具费用:{{sData.productCarSData.moneySymbol}}{{citem.toolPrice}}</p>
                <div class="cn-notice">
                  <span v-text="citem.isCake==true?sData.produstDetail.justCd[0]:sData.produstDetail.justCd[1]"></span>
                  <span v-text="citem.remark" class="detail" v-if="citem.remark != 'undefined'"></span>
                </div>
              </section>
            </div>
          </div>
          <div class="number-operation-warp">
            <div class="number-operation com-div-middle-ab"><img
              src="../../assets/productCar/car/minus.png" @click="accountOperation(0,cindex)"><span class="number-value" v-text="citem.number"></span><img
              src="../../assets/productCar/car/add.png" @click="accountOperation(1,cindex)"></div>
          </div>

        </div>
      </div>
      <footer class="product-car-foot">
        <div class="all-select-warp com-div-middle-re">
          <section class="check-img com-div-middle-ab"><input
          type="checkbox"  v-model="isAllChecked" value="true"
          name="thisItem" class="item-checkbox"><img
          src="../../assets/productCar/car/notCheck.png"
          class="not-checked"><img src="../../assets/productCar/car/checked.png"
                                   class="is-checked"></section>
          <span class="all-check-text" v-text="sData.productCarSData.allSelect"></span><span
          class="all-check-sum" v-text="sData.productCarSData.sumText"></span><span
          class="all-money-symbol" v-text="sData.productCarSData.moneySymbol"></span><span class="all-money" v-text="sum"></span>
        </div>
       <div class="goAccount" v-text="sData.productCarSData.goAccount" @click="goSureOrder()"></div>
      </footer>
      <!-- 弹框 -->
      <div class='pop' v-if="isDeleteShow">
        <div>
          <p class='tit'>确认删除该商品吗?</p>
          <p class='btn'>
            <span class='cancel' @click="cancel">取消删除</span>
            <span class='submit' @click='doDelete'>确认删除</span>
          </p>
        </div>
      </div>
    </div>
</template>
<script type="text/javascript">
  export default {
    data(){
      return{
        ischeck:false,
        thisGetData:"",
        sum:0,
        checkedID:[],
        isAllChecked:[],
        isDeleteShow: false,
        deleteId:'',
        deleteItem:''
      }
    },
    props:['sData'],
    methods:{
      doDelete(){
        this.postAjax(this.sData.url.deleteCart,{id:this.deleteId},(res)=>{
          console.log(res)
          if(res.status==200){
            this.thisGetData = this.thisGetData.filter(it => it!=this.deleteItem);
          }else{
            m$.template({
               val: '删除失败请重试',
               time: 1500
            })
          }
          this.isDeleteShow = false;
           m$.hiddenScroll(false);
        });
      },
      cancel(){
        this.isDeleteShow = false;
         m$.hiddenScroll(false);
      },
      goProducDetailFn(oitem){
        m$.template({
          val:''
        })
        this.$router.push({
          name: 'productDetail',
          params: {productId: oitem.productId,size:oitem.specificationValue}
        })
      },
      accountOperation(obool,oindex){
        console.log(obool);
        //控制选中之后才可以加减数量
        // var oflag=false;
        // for(var i=0;i<this.checkedID.length;i++){
        //   if(this.checkedID[i]==oindex){
        //     oflag=true;
        //   }
        // }
        // if(oflag==false){
        //   return;
        // }
        if(obool==0){
          if(this.thisGetData[oindex].number>1){
            this.thisGetData[oindex].number--;
          }
        }
        else {
          this.thisGetData[oindex].number++;
        }
        this.sum=0;
        for(var i=0;i<this.checkedID.length;i++){

            this.sum+=this.thisGetData[this.checkedID[i]].number*this.thisGetData[this.checkedID[i]].price+Number(this.thisGetData[this.checkedID[i]].toolPrice);

        }
        if(this.sum!=0){
          this.sum=this.sum.toFixed(2);
        }
      

      },
      deleteCar(item,oid){
        this.isDeleteShow = true;
        m$.hiddenScroll(true);
        this.deleteId = oid;
        this.deleteItem = item;
      },
      getData(){
            this.getAjax(this.sData.url.productCar,{userId:this.sData.userId},(res)=>{
              if(res&&res.data){
                this.thisGetData=res.data;
                console.log(this.thisGetData)
              }
            })
      },
      goSureOrder(){
        var obj=[];
        for(var i=0;i<this.checkedID.length;i++){
          obj.push(this.thisGetData[this.checkedID[i]])
        }
        console.log(obj);
       if(obj&&obj.length>0){
         m$.localStrages.set('orderItemBeans',obj);
         m$.localStrages.set('couponId','')
         m$.localStrages.set('addressId','')
         this.$router.push({name:'sureOrder'});
       }

      }
    },
    created(){
      document.title=this.sData.productCarSData.title
      this.getData()
    },
    watch:{
      'isAllChecked':function(val){
        if(val.length>0){
          for(var i=0;i<this.thisGetData.length;i++){
            this.checkedID.push(i)
          }
        }
        else {
          this.checkedID=[];
        }

      } ,
      'checkedID':function (val) {
        this.sum=0;
        for(var i=0;i<val.length;i++){
          this.sum+=this.thisGetData[val[i]].number*this.thisGetData[val[i]].price+Number(this.thisGetData[this.checkedID[i]].toolPrice);
        }
        if(this.sum!=0){
          this.sum=this.sum.toFixed(2)
        }
        
      }
    }
  }
</script>
<style scoped lang="less">
    @import "productCar";
</style>
